<template>
  <van-image :height="height" :width="width" :src="qiniuSrc" :lazy-load="lazy" :round="round" :radius="radius"
             :fit="fit">
    <template v-slot:loading>
      <xka-icon name="xka-icon-a-xingzhuangjiehe2x" size="32"></xka-icon>
    </template>
    <template v-slot:error>
      <xka-icon name="xka-icon-a-xingzhuangjiehe2x" size="32"></xka-icon>
    </template>
  </van-image>
</template>

<script>
export default {
  props: {
    // 图片填充模式
    // contain	保持宽高缩放图片，使图片的长边能完全显示出来
    // cover	保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边
    // fill	拉伸图片，使图片填满元素
    // none	保持图片原有尺寸
    // scale-down	取none或contain中较小的一个
    fit: {
      type: String,
      default: 'cover'
    },
    lazy: {
      type: Boolean,
      default: true
    },
    round: Boolean,
    radius: [String, Number],
    src: String,
    width: [String, Number],
    height: [String, Number]
  },
  computed: {
    qiniuSrc() {
      if (!this.src) return ''
      return this.$utils.$getQiniuImgUrl({url: this.src, width: this.width, height: this.height})
    }
  }
}
</script>

<style scoped>
.van-image {
  display: block;
}
</style>
